import React from "react"

const Tab = () => {

    // // 定义状态
    const [active,setActive] = React.useState('/')

    // // 获取当前location对象
    const location = React.$Router.useLocation()

    // // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // // 函数组件里面没有生命周期,等于挂载,更新,卸载的组合hook函数
    // // 类似Vue的监听watch函数
    React.useEffect(()=>{
        setActive(location.pathname)
    })

    // // 跳转
    const onTo = (value) => {
        navigate(value)
        setActive(value)
    }
    
    return (
        <>
            <div className="foot_menu">
                <React.$Vant.Tabbar activeColor='#ef6382' value={active} onChange={onTo}>
                    <React.$Vant.Tabbar.Item icon={<React.$Icons.WapHomeO />} name='/'>首页</React.$Vant.Tabbar.Item>
                    <React.$Vant.Tabbar.Item icon={<React.$Icons.AppsO />} name='/product/product/type' >商品</React.$Vant.Tabbar.Item>
                    <React.$Vant.Tabbar.Item icon={<React.$Icons.Description />} name="/essay/essay/index">文章</React.$Vant.Tabbar.Item>
                    <React.$Vant.Tabbar.Item icon={<React.$Icons.Contact />} name="/business/base/index">我的</React.$Vant.Tabbar.Item>
                </React.$Vant.Tabbar>
            </div>
        </>
    )
}

export default Tab